<template>
  <div class="order-details">
    <!-- 订单基础信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单详情</span>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label-class-name="my-label" content-class-name="my-content" label="订单号">
          {{ order.order_sn }} <i class="el-icon-copy-document" @click="copyText(order.order_sn)" />
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag style="color: white" :color="statusTagType">{{ order.order_status_desc }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="item-title" label="合计金额">
          ￥ {{ order.total_price }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="item-title" label="应付金额">
          ￥ {{ order.order_pay_price }}
        </el-descriptions-item>
        <el-descriptions-item label-class-name="item-title" label="实付金额">
          ￥ {{ order.pay_price }}
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">{{ order.pay_type_desc }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ order.created_at }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ order.pay_time || '/' }}</el-descriptions-item>

        <el-descriptions-item v-if="order_goods_type===1" label="收货地址信息" label-class-name="my-label" content-class-name="my-content">
          {{ order.address_info || '-' }}
          <i class="el-icon-copy-document" @click="copyText(order.address_info)" />
        </el-descriptions-item>
        <el-descriptions-item label="客户备注">{{ order.remark || '-' }}</el-descriptions-item>
        <el-descriptions-item
          v-if="order_goods_type===1 && order.express_info"
          label-class-name="my-label"
          content-class-name="my-content"
          label="运单信息"
        >
          {{ order.express_info.express_name + ' ：' + order.express_info.express_no }}
          <i
            class="el-icon-copy-document"
            @click="copyText(order.express_info.express_name+' '+ order.express_info.express_no)"
          />
        </el-descriptions-item>
        <el-descriptions-item v-if="order_goods_type===2 && order.send_time && order.virtual_info" :content-style="{maxWidth: '200px'}" label="虚拟发货信息">
          <div class="bs-red">{{ order.virtual_info }}</div>
          <i class="el-icon-copy-document" @click="copyText(order.virtual_info)" />
        </el-descriptions-item>
        <el-descriptions-item v-if="order.refund_log" class="refund" label="退款申请说明">
          <span class="bs-red"> 原因：{{
            order.refund_log.reason
          }}  <br>补充说明： {{ order.refund_log.remark || '-' }}</span>
          <template v-if="order.refund_log.images">
            <br>
            <el-image
              v-for="src in order.refund_log.images"
              :key="src"
              :src="src"
              :preview-src-list="order.refund_log.images"
              style="width: 50px;height: 50px"
            />
          </template>

        </el-descriptions-item>

        <el-descriptions-item label="操作">
          <div v-if="order.buttons" class="action-buttons">
            <el-button v-if="order.buttons.check===1" size="small" type="primary" @click="handleReview(1)">通过审核
            </el-button>
            <el-button v-if="order.buttons.check===1" size="small" type="warning" @click="handleReview(-1)">驳回审核
            </el-button>
            <el-button v-if="order.buttons.send===1" size="small" type="warning" @click="showExpressDialog = true">
              发货
            </el-button>
            <el-button v-if="order.buttons.express===1" size="small" type="warning" @click="getExpressLog">
              查询物流
            </el-button>
            <el-button v-if="order.buttons.refund===1" size="small" type="danger" @click="showRefundDialog = true">
              处理退款申请
            </el-button>
            <el-button v-if="order.buttons.edit_price===1" size="small" type="primary" @click="handleChangeAmount">修改金额
            </el-button>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 商品信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品列表</span>
      </div>
      <el-table :data="goodsList" style="width: 100%">
        <el-table-column prop="goods_image" label="图片">
          <template v-slot="{scope,row}">
            <img :src="row.goods_image" alt="商品图片" width="50">
          </template>
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" />
        <el-table-column prop="goods_spec" label="规格" />
        <el-table-column prop="goods_price" label="单价" />
        <el-table-column prop="goods_count" label="数量" />
        <el-table-column prop="goods_total_price" label="总价" />

      </el-table>
    </el-card>
<!--   发票信息 -->
    <el-card class="box-card" v-if="order.invoice">
      <div slot="header" class="clearfix">
        <span>发票信息</span>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item :label="item.name" v-for="(item,index) in order.invoice" :key="index">{{ item.value }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div class="footer">
      <el-button @click="goBack">返回</el-button>
    </div>
    <!--物流发货弹出层    -->
    <express-dialog
      ref="expressDialog"
      :order-goods-type="order.order_goods_type"
      :virtual-info="order.virtual_info||''"
      :visible.sync="showExpressDialog"
      @confirm="handleConfirm"
    />
    <refund-dialog
      ref="refundDialog"
      :visible.sync="showRefundDialog"
      @confirm="handleRefundConfirm"
    />

  </div>
</template>

<script>
import api from '@/api/order'
import ExpressDialog from '@/components/order/ExpressDialog.vue'
import RefundDialog from '@/components/order/RefundDialog.vue'

export default {
  components: {
    ExpressDialog,
    RefundDialog
  },
  data() {
    return {
      showExpressDialog: false,
      showRefundDialog: false,
      order_goods_type: 1,
      expressInfo: null,
      order: {}, // 订单信息
      goodsList: [] // 商品列表
    }
  },
  computed: {
    statusTagType() {
      const statusMap = {
        '0': 'gray',
        '1': 'blue',
        '2': 'green',
        '3': '#e6a23c',
        '4': 'green',
        '5': 'red',
        '6': 'gray',
        '7': 'red'
      }
      return statusMap[this.order.order_status]
    },

  },
  mounted() {

  },
  created() {
    if (this.$route.query.hasOwnProperty('order_id')) {
      this.getData(this.$route.query.order_id)
    }
  },
  methods: {
    handleRefundConfirm(formData) {
      if (!formData.status) {
        this.$message.error('请选择处理结果')
        return
      }
      const that = this
      formData.id = this.order.refund_log.id
      formData.order_id = this.order.order_id
      api.refund_save(formData).then(res => {
        this.$message({
          type: res.code == 0 ? 'success' : 'error',
          message: res.msg
        })
        if (res.code === 0) {
          that.getData(this.order.order_id)
        }
      }).finally(() => {
        this.showRefundDialog = false
      })
    },
    handleConfirm(expressInfo) {
      this.expressInfo = expressInfo
      const order_goods_type = this.order.order_goods_type
      if (order_goods_type === 1 && !this.expressInfo.express_no) {
        this.$message.error('请填写物流单号')
        return
      } else if (order_goods_type === 2 && !this.expressInfo.virtual_info) {
        this.$message.error('请填写虚拟物品发货信息')
        return
      }
      api.send(Object.assign(expressInfo, { order_id: this.order.order_id })).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        })
        this.showExpressDialog = false
        this.getData(this.$route.query.order_id)
      }).finally(() => {
        this.expressInfo = null
      })
    },
    getData(order_id) {
      api.info({ order_id: order_id }).then(res => {
        this.order = res.data.order
        this.goodsList = res.data.goods_list
        this.order_goods_type = res.data.order.order_goods_type
      })
    },
    getExpressLog() {
      this.$message.info('暂未开放')
    },

    handleReview(status) {
      if (!this.order.buttons.check) {
        this.$message.error('订单无需审核')
      }
      const that = this
      const msg = status === 1 ? '此操作将订单审核通过,确定收到订单付款金额再操作哦, 是否继续?' : '此操作将订单驳回支付审核申请，订单将进入待支付状态，是否继续？'
      this.$confirm('', msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.check({ order_id: this.order.order_id, status: status }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg
          })
          that.order = null
          that.goodsList = []
          that.getData(this.$route.query.order_id)
        })
      }).catch(() => {
      })
    },

    handleChangeAmount() {
      // 修改金额逻辑,弹窗输入金额框
      this.$prompt('请输入新的金额', '修改应付金额', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
        inputErrorMessage: '金额格式不正确'
      }).then(({ value }) => {
        const oldPrice = parseFloat(this.order.order_pay_price)
        console.log(value, oldPrice)
        if (value < 0 || value > oldPrice) {
          this.$message.error('金额范围应大于0小于原有应付金额' + oldPrice)
          return
        }
        api.edit_price({
          order_id: this.order.order_id,
          price: value
        }).then(res => {
          this.$message({
            type: res.code === 0 ? 'success' : 'error',
            message: res.msg
          })
          if (res.code === 0) {
            this.getData(this.$route.query.order_id)
          }
        })
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.order-details {
  color: #1f2d3d;
}

.order-details .box-card {
  margin-bottom: 20px;
}

/deep/ .item-title {
  font-weight: bold;
  color: #e90808;
}

/deep/ .bs-red {
  color: #e90808;
}

/deep/ .my-label {
  background: #E1F3D8;
}

/deep/ .my-content {
  background: #FDE2E2;
}

.action-buttons {
  text-align: left;
}

.footer {
  text-align: center;
}
</style>
